Checkbox 多选框

介绍

收集用户的多项选择。

用法

基本引入

import { FQCheckbox } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/checkbox.scss';

基础用法

<FQCheckbox>Checkbox</FQCheckbox>

不可用

<FQCheckbox disabled />
<FQCheckbox checked disabled />

受控的 Checkbox

const [checked, setChecked] = useState(false);
const [disabled, setDisabled] = useState(false);

<FQCheckbox checked={checked} disabled={disabled} onChange={onChange}>
  { `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}` }
</FQCheckbox>

Checkbox 组

const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  {
    label: 'Apple',
    value: 'Apple',
    disabled: true,
    className: 'label-1',
    onChange: (val, e) => console.log(val, e),
  },
  {
    label: 'Pear',
    value: 'Pear',
    className: 'label-2',
    onChange: (val, e) => console.log(val, e),
  },
  {
    label: 'Orange',
    value: 'Orange',
    className: 'label-3',
    onChange: (val, e) => console.log(val, e),
  },
];

<FQCheckbox.Group options={options} />
<FQCheckbox.Group options={plainOptions} />

自定义布局

<FQCheckbox.Group>
  <View className='row'>
    <View className='col-8'>
      <FQCheckbox value='A'>A</FQCheckbox>
    </View>
    <View className='col-8'>
      <FQCheckbox value='B'>B</FQCheckbox>
    </View>
    <View className='col-8'>
      <FQCheckbox value='C'>C</FQCheckbox>
    </View>
    <View className='col-8'>
      <FQCheckbox value='D'>D</FQCheckbox>
    </View>
    <View className='col-8'>
      <FQCheckbox value='E'>E</FQCheckbox>
    </View>
  </View>
</FQCheckbox.Group>

API

属性

参数	说明	类型	默认值	版本
checked	指定当前是否选中	boolean	false
defaultChecked	初始是否选中	boolean	false
disabled	是否禁用	boolean	false
onChange	变化时回调函数	function(val: boolean, e: CheckboxChangeEvent)	-

Checkbox.Group

参数	说明	类型	默认值	版本
defaultValue	默认选中的选项	(string | number)[]	[]
disabled	整组失效	boolean	false
options	以配置形式设置子元素	string[] | number[] | Array<CheckboxOptionType>	-
value	指定选中的选项	(string | number | boolean)[]	[]
onChange	选项变化时的回调函数	function(checkedValue: any[])	-

CheckboxOptionType

参数	说明	类型	默认值	版本
label	选项的 label	ReactNode	-
value	选项的值	any	-
style	选项的样式	React.CSSProperties	-
className	选项的类名	string	-
disabled	选项失效状态	boolean	false
onChange	变化时回调函数	function(val: boolean, e: CheckboxChangeEvent)	-